<!--
 * @Description: 购房链路分析
 * @Author: py
 * @Date: 2024-10-31
-->
<script setup lang="ts" name="purchase-analysis">
// import { useRouter } from 'vue-router'

import AgeAnalysis from './components/age-analysis.vue'
import AssociationAnalysis from './components/association-analysis.vue'
import AssociationComposition from './components/association-composition.vue'
import ChainOverview from './components/chain-overview.vue'
import ConversionAnalysis from './components/conversion-analysis.vue'
import CustomerAnalysis from './components/customer-analysis.vue'
import DealAnalysis from './components/deal-analysis.vue'
import DealBoard from './components/deal-board.vue'
import DomicileStatistics from './components/domicile-statistics.vue'
import OperationAnalysis from './components/operation-analysis.vue'
import ServiceAnalysis from './components/service-analysis.vue'
import SourceAnalysis from './components/source-analysis.vue'
import SourceComposition from './components/source-composition.vue'
import UsageBoard from './components/usage-board.vue'

// const router = useRouter()

const oDay = day()
const todayLabel = oDay.format('YYYY-MM-DD')
const yesterdayLabel = oDay.subtract(1, 'day').format('YYYY-MM-DD')
const yesterdayRangeArr = [yesterdayLabel, yesterdayLabel]
const last7DateLabel = oDay.subtract(7, 'day').format('YYYY-MM-DD')
const last7RangeArr = [last7DateLabel, todayLabel]
const last30DateLabel = oDay.subtract(30, 'day').format('YYYY-MM-DD')
const last30RangeArr = [last30DateLabel, todayLabel]

const rangeList = ref([
    {
        name: '昨天',
        type: 'yesterday',
        value: yesterdayRangeArr,
    },
    {
        name: '近7天',
        type: 'lastWeek',
        value: last7RangeArr,
    },
    {
        name: '近30天',
        type: 'lastMonth',
        value: last30RangeArr,
    },
])
const curRangeType = ref('lastWeek')

const dateSelection = ref(last7RangeArr)

const oDateRange = computed(() => {
    const [startTime, endTime] = dateSelection.value
    return {
        endTime,
        startTime,
    }
})
provide('dateRange', oDateRange)

function clickPresetRange(oItem) {
    curRangeType.value = oItem.type
    dateSelection.value = oItem.value
}
function handleRangeChange() {
    curRangeType.value = ''
}

// const minTimestamp = oDay.subtract(7, 'month').subtract(1, 'day').valueOf()
const minTimestamp = day('2024-04-01').valueOf()
const maxTimestamp = oDay.valueOf()
function disabledDate(time) {
    const aTimestamp = time.getTime()
    return aTimestamp > maxTimestamp || aTimestamp < minTimestamp
}

const activeUserTab = ref('couponUsers')
</script>

<template>
    <div class="page-container">
        <ChainOverview />

        <div class="row-date">
            <span class="label-date">统计日期</span>

            <div class="btn-group">
                <div v-for="(item, index) of rangeList"
                     :key="index"
                     class="btn-item"
                     :class="item.type === curRangeType ? 'active' : ''"
                     @click="clickPresetRange(item)"
                >
                    {{ item.name }}
                </div>
            </div>

            <div class="picker-box">
                <el-date-picker v-model="dateSelection"
                                unlink-panels
                                type="daterange"
                                value-format="YYYY-MM-DD"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :clearable="false"
                                :editable="false"
                                :disabled-date="disabledDate"
                                @change="handleRangeChange"
                />
            </div>
        </div>

        <OperationAnalysis />

        <ConversionAnalysis />

        <el-row class="module-panel">
            <el-col :span="16">
                <DealAnalysis />
            </el-col>

            <el-col :span="8">
                <DealBoard />
            </el-col>
        </el-row>

        <el-row class="module-panel">
            <el-col :span="16">
                <SourceAnalysis />
            </el-col>

            <el-col :span="8">
                <SourceComposition />
            </el-col>
        </el-row>

        <el-row class="module-panel">
            <el-col :span="16">
                <AssociationAnalysis />
            </el-col>

            <el-col :span="8">
                <AssociationComposition />
            </el-col>
        </el-row>

        <div class="module-panel pannel-user">
            <div class="row-user">
                <div class="row-title">
                    用户分析
                </div>

                <div class="tabs-wrapper">
                    <el-tabs v-model="activeUserTab">
                        <el-tab-pane label="领券用户"
                                     name="couponUsers"
                        />

                        <el-tab-pane label="购房人"
                                     name="homebuyers"
                        />
                    </el-tabs>
                </div>
            </div>

            <el-row>
                <el-col :span="16">
                    <AgeAnalysis :statistics-type="activeUserTab" />
                </el-col>

                <el-col :span="8">
                    <DomicileStatistics />
                </el-col>
            </el-row>
        </div>

        <el-row class="module-panel">
            <el-col :span="16">
                <ServiceAnalysis />

                <CustomerAnalysis />
            </el-col>

            <el-col :span="8">
                <UsageBoard />
            </el-col>
        </el-row>
    </div>
</template>

<style lang="less" scoped>
@import './panel.less';

.page-container {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.row-date {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;

    .label-date {
        font-size: 14px;
        line-height: 20px;
        color: #1d2129;
        margin-right: 8px;
    }

    .btn-group {
        display: inline-flex;
        column-gap: 8px;
        margin-right: 20px;

        .btn-item {
            padding: 4px 12px;
            border-radius: 2px;
            background-color: #f2f3f5;
            border: 1px solid #f2f3f5;
            color: #4e5969;
            font-size: 14px;
            line-height: 20px;
            cursor: pointer;

            &.active {
                background-color: #fff0f0;
                border: 1px solid #da0004;
                color: #da0004;
            }
        }
    }

    .picker-box {
        width: 400px;
    }
}

.pannel-user {
    padding-top: 0;

    .row-user {
        position: relative;
        display: flex;
        justify-content: center;
        padding-top: 15px;
        margin-bottom: 20px;

        .row-title {
            position: absolute;
            left: -5px;
            top: 15px;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            color: #1d2129;
        }
    }
}

.tabs-wrapper {
    width: 125px;

    :deep(.el-tabs__header) {
        margin: 0;
    }

    :deep(.el-tabs__nav-wrap) {
        &::after {
            display: none;
        }
    }

    :deep(.el-tabs__item) {
        height: 26px;
        padding: 0 12px;
        align-items: unset;
    }
}
</style>
